<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" :label-width="isMobile()?'100px':'200px'" class="layout-all form-width">
      <el-form-item prop="id" label="等级:" >
        <el-input v-model="form.id" placeholder=""  :disabled="true"/>
      </el-form-item>
      <el-form-item prop="title" label="等级名称:" >
        <el-input v-model="form.title" placeholder="请输入等级名称" />
      </el-form-item>

      <el-form-item prop="discount" label="购物折扣(叠加等级折扣折上折)%:">
        <el-input v-model="form.discount" placeholder="请输入购物折扣" />
      </el-form-item>
      <el-form-item prop="need_num" label="升级消费额度:" >
        <el-input v-model="form.need_num" placeholder="请输入升级消费额度" />
      </el-form-item>
      <el-form-item prop="headimgurl" label="图标：建议尺寸:(20X20)">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100" cate_id="1"/>
      </el-form-item>
      <el-form-item prop="goods_ids" label="所需购买商品:" >
        <el-input v-model="form.goods_ids" placeholder="请输入所需直推人数" />
      </el-form-item>
      <el-form-item prop="need_man" label="所需直推人数:" >
        <el-input v-model="form.need_man" placeholder="请输入所需直推人数" />
      </el-form-item>
        <el-form-item prop="child_level" label="直推人所需等级:" >
        <el-select v-model="form.child_level" placeholder="请选择">
            <el-option
              v-for="item in level_info"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

                <el-form-item prop="child_proxy_level" label="直推人所需代理等级:" >
        <el-select v-model="form.child_proxy_level" placeholder="请选择">
            <el-option
              v-for="item in proxy_info"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item prop="team_nan" label="所需团队人数:" >
        <el-input v-model="form.team_nan" placeholder="请输入所需团队人数" />
      </el-form-item>
      <el-form-item prop="team_num" label="所需团队消费额:" >
        <el-input v-model="form.team_num" placeholder="请输入所需团队消费额" />
      </el-form-item>
      <el-form-item prop="level_diff" :label="'级差奖励('+(percentage==1?'%':'元')+'):'" >
        <el-input v-model="form.level_diff" placeholder="级差奖励" />
      </el-form-item>
      <el-form-item prop="level_identical" :label="'同级奖励('+(percentage==1?'%':'元')+'):'" >
        <el-input v-model="form.level_identical" placeholder="同级奖励" />
      </el-form-item>
      <el-form-item prop="team_manage" label="团队管理奖励%:" >
        <el-input v-model="form.team_manage" placeholder="团队管理奖励%" />
      </el-form-item>
      <!-- <el-form-item label="是否单独分佣:" prop="is_commission">
        <el-switch v-model="form.is_commission" />
      </el-form-item>
      <el-form-item v-if="form.is_commission">
        <el-form-item label="按金额分佣:" prop="is_commission">
          <el-switch v-model="proportion.commission_type" />
        </el-form-item>
        <el-form-item :label="(index+1)+'级分佣比(%):'" prop="first_rebate" v-for="(val,index) in proportion.proportion" :key="index" v-if="proportion.commission_type==false" label-width="130px">
          <el-input v-model="proportion.proportion[index]" style="width:150px;" placeholder="请输入一级分佣比(%)" />
        </el-form-item>
        <el-form-item :label="(index+1)+'级分佣金额(元):'" prop="first_rebate" v-for="(val,index) in proportion.fixed" :key="index" v-if="proportion.commission_type==true" label-width="130px">
          <el-input v-model="proportion.fixed[index]" style="width:150px;"  placeholder="请输入一级分佣比(元)" />
        </el-form-item>
      </el-form-item>
       <el-form-item label="折扣是否单独分佣:" prop="is_dis_commission">
        <el-switch v-model="form.is_dis_commission" />
      </el-form-item>
      <el-form-item v-if="form.is_dis_commission">
        <el-form-item label="按金额分佣:" prop="is_commission">
          <el-switch v-model="dis_proportion.commission_type" />
        </el-form-item>
        <el-form-item :label="(index+1)+'级分佣比(%):'" prop="first_rebate" v-for="(val,index) in dis_proportion.proportion" :key="index" v-if="dis_proportion.commission_type==false" label-width="130px">
          <el-input v-model="dis_proportion.proportion[index]" style="width:150px;" placeholder="请输入一级分佣比(%)" />
        </el-form-item>
        <el-form-item :label="(index+1)+'级分佣金额(元):'" prop="first_rebate" v-for="(val,index) in dis_proportion.fixed" :key="index" v-if="dis_proportion.commission_type==true" label-width="130px">
          <el-input v-model="dis_proportion.fixed[index]" style="width:150px;"  placeholder="请输入一级分佣比(元)" />
        </el-form-item> 
      </el-form-item>-->
      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name:"proxy_level_form",
  components: { ElImageViewer },
  data() {
    return {
      id: 0,
      percentage: 0,
      is_change: undefined,
      RETAIL_LEVEL: 0,
      proportion: {
        commission_type:false,
        	fixed:[],
        	proportion:[],
      },
       dis_proportion: {
        commission_type:false,
        	fixed:[],
        	proportion:[],
      },
      level_info: [],
      proxy_info: [],
      form: {
        id: 1,
        status: true,
        title: '',
        discount: 0,
        need_num: 0,
        is_commission: 0,
        thumb: '',
        is_dis_commission:0,
      },
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        headimgurl: [{}]
      }
    }
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into()
  },
  methods: {
    onSubmit(formName) {
      const form = this.form
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.status === true ? form.status = 1 : form.status = 0
          form.proportion=this.proportion
          form.proportion.commission_type	=form.proportion.commission_type=== true ?1:0
          form.dis_proportion=this.dis_proportion
          form.dis_proportion.commission_type	=form.dis_proportion.commission_type=== true ?1:0

          console.log(form)
          this.get('/admin/ProxySetting/save', form, 'POST').then(e => {this.$back()})
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },
    bk() {
      this.$router.back()
    },
    init_into() {
      this.get('/admin/ProxySetting/info?id=' + this.id, {}, 'POST').then(e => {
        this.form = e.info.tpl
        this.percentage = e.percentage
        this.level_info=e.level_info
        this.proxy_info=e.proxy_info
        this.proxy_info.unshift({id:0,title:'不限'})
        this.level_info.unshift({id:0,title:'不限'})
        this.form.status =e.info.tpl.status === 1
        this.form.is_commission =e.info.tpl.is_commission === 1
        this.form.is_dis_commission =e.info.tpl.is_dis_commission === 1
        //dis_proportion
        //折扣分佣数组
        this.RETAIL_LEVEL = e.RETAIL_LEVEL
        if(e.dis_proportion!=null){
          this.dis_proportion=e.dis_proportion
          this.dis_proportion.commission_type	=this.dis_proportion.commission_type== 1 ?true:false
        }
        let dis_count=this.RETAIL_LEVEL-this.dis_proportion.fixed.length
        if(dis_count<0){
          this.dis_proportion.fixed=this.dis_proportion.fixed.slice(0,this.RETAIL_LEVEL)
        }else if(dis_count>0){
          for(let i=0 ;i<dis_count;i++){
            this.dis_proportion.fixed.push(0)
          }
        }
        console.log(this.dis_proportion.proportion)
        dis_count=this.RETAIL_LEVEL-this.dis_proportion.proportion.length
        if(dis_count<0){
          this.dis_proportion.proportion=this.dis_proportion.proportion.slice(0,this.RETAIL_LEVEL)
        }else if(dis_count>0){
          for(let i=0 ;i<dis_count;i++){
            this.dis_proportion.proportion.push(0)
          }
        }


        //分佣数组
        this.RETAIL_LEVEL = e.RETAIL_LEVEL
        if(e.proportion!=null){
          this.proportion=e.proportion
          this.proportion.commission_type	=this.proportion.commission_type== 1 ?true:false
        }
        let count=this.RETAIL_LEVEL-this.proportion.fixed.length
        if(count<0){
          this.proportion.fixed=this.proportion.fixed.slice(0,this.RETAIL_LEVEL)
        }else if(count>0){
          for(let i=0 ;i<count;i++){
            this.proportion.fixed.push(0)
          }
        }
        count=this.RETAIL_LEVEL-this.proportion.proportion.length
        if(count<0){
          this.proportion.proportion=this.proportion.proportion.slice(0,this.RETAIL_LEVEL)
        }else if(count>0){
          for(let i=0 ;i<count;i++){
            this.proportion.proportion.push(0)
          }
        }
        setTimeout(()=>{this.is_change=false},100)
      })
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
         if(this.is_change!=undefined)
        this.is_change=true
      },
      deep:true
    },
    proportion:{
      handler (val, oldVal) {
         if(this.is_change!=undefined)
        this.is_change=true
      },
      deep:true
    },
    dis_proportion:{
      handler (val, oldVal) {
         if(this.is_change!=undefined)
        this.is_change=true
      },
      deep:true
    },
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
